<template>
	<div class="cms-site-container">
		<el-form ref="configSiteFormRef" :model="formData" :rules="formRules" size="small" label-width="80px">
			<el-row :gutter="35">
				<el-col class="mb20">
					<el-form-item label="站点地址" prop="siteUrl">
						<el-input v-model="formData.siteUrl" placeholder="请输入站点地址" :readonly="readonly" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col class="mb20">
					<el-form-item label="站点编码" prop="siteCode">
						<el-input v-model="formData.siteCode" placeholder="请输入站点编码" :readonly="readonly" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col class="mb20">
					<el-form-item label="存储地址" prop="sitePath">
						<el-input v-model="formData.sitePath" placeholder="请输入存储地址" :readonly="readonly" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col class="mb20">
					<el-form-item label="备注" prop="remark">
						<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :readonly="readonly" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col class="mb20">
					<center>
						<el-button v-auth="'cms:site:config'" v-if="readonly" type="primary" @click="onCheck" size="small">编 辑</el-button>
						<el-button v-else type="primary" @click="onSubmit" size="small">保 存</el-button>
					</center>
				</el-col>
			</el-row>
		</el-form>
		<el-dialog title="密码验证" v-model="isShowDialog" width="30%">
			<el-form ref="pwdverifyFormRef" :model="verifyFormData" :rules="verifyFormRules" size="small" label-width="80px">
				<el-row :gutter="35">
					<el-col class="mb20">
						<span style="color: var(--color-warning);">修改站点配置属于危险操作，请确认是否必要修改，如是请继续操作。</span>
					</el-col>
					<el-col class="mb20">
						<el-form-item label="登录密码" prop="password">
							<el-input type="password" v-model="verifyFormData.password" placeholder="请输入当前登录用户密码" class="w100" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onVerifyCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onVerifySubmit" size="small">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { pwdVerify } from '/@/api/login/index';
import { verifyPassword } from '/@/utils/toolsValidate';
import { Local } from '/@/utils/storage';
import { SM } from '/@/utils/sm';
import { getSiteConfig, configSite } from '/@/api/cms/channel/index';
export default defineComponent ({
	name: 'cms/site/config',
	props: {
		siteId: {
			type: String,
			default: () => '',
		},
	},
	setup(props) {
		const configSiteFormRef = ref();
		const pwdverifyFormRef =ref();
		const validPassword = (rule, value, callback) => {
			if(!value){
				return callback(new Error('登录密码不能为空'));
			}
			if(!verifyPassword(value)){
				return callback(new Error('只允许字母数字和 !@#$%^&.*_ 组成6~16个字符'));
			}
			callback();
		}
		const state = reactive({
			isShowDialog: false,
			readonly: true,
			formData: {
				siteUrl: '',
				siteCode: '',
				sitePath: '',
				remark: ''
			},
			formRules : {
				siteUrl : { required: true, message: '站点地址不能为空', trigger: 'blur' },
				siteCode: { required: true, message: '站点编码不能为空', trigger: 'blur' },
				sitePath: { required: true, message: '存储地址不能为空', trigger: 'blur' },
			},
			verifyFormData: {},
			verifyFormRules : {
				password: { required: true, validator: validPassword, trigger: 'blur' },
			}
		});
		
		const loadSiteConfig = async () => {
			await getSiteConfig({siteId: props.siteId}).then((res) => {
				if(res.code == 0 && res.data){
					state.formData = res.data;
				}
			});
		}
		//打开编辑前校验
		const onCheck = () => {
			state.isShowDialog = true;
		}
		const onVerifyCancel = () => {
			state.isShowDialog = false;
		}
		const onVerifySubmit = () => {
			pwdverifyFormRef.value.validate(valid => {
				if(valid){
					const publickey = Local.get('publicKey');
					let password = SM.sm2Encrypt(state.verifyFormData.password, publickey);
					pwdVerify({password : password}).then((res) => {
						if(res.code === 0 && res.data === true){
							ElMessage.success('密码验证通过');
							state.verifyFormData.password = undefined;
							state.readonly = false;
							state.isShowDialog = false;
						}else{
							ElMessage.error('密码验证不通过');
						}
					});
				}
			});
		};
		// 保存
		const onSubmit = () => {
			configSiteFormRef.value.validate(valid => {
				if(valid){
					let params = {
						id: state.formData.id,
						siteId: props.siteId,
						siteUrl: state.formData.siteUrl,
						siteCode: state.formData.siteCode,
						sitePath: state.formData.sitePath,
						remark: state.formData.remark
					}
					configSite(params).then((res) => {
						if(res.code === 0){
							state.formData = res.data;
							state.readonly = true;
							ElMessage.success('保存成功');
						}
					});
				}
			});
		};
		
		//监听model数据
		watch(() => props.siteId, () => {
			loadSiteConfig();
		});
		return {
			configSiteFormRef,
			pwdverifyFormRef,
			onCheck,
			onVerifyCancel,
			onVerifySubmit,
			onSubmit,
			...toRefs(state),
		};
	},
});
</script>

<style>
</style>
